<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<!--
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">主页</h1>
	</header>
	-->
        <body background="background.jpg"/>
		 <a href="path/about.html">
			<img src="icon/about.png"/>
		</a>
    <br />
    <br />
    <div class="主体" style="text-align:center;">
        参数1<input type="text" style="width: 200px;height: 20px;"id="num1" /><br /><br />
        参数2<input type="text" style="width: 200px;height: 20px;"id="num2"/><br /><br />
        参数3<input type="text" style="width: 200px;height: 20px;"id="num3"/><br /><br />
        输出框<input type="text" style="width: 200px;height: 20px;"id="num4"/>

      </div>
      <br />
      <br />
        <div class="主体" style="text-align:center;"> 
          <input type="button" value="加法" id="jiafa" style="width:110px;height: 50px;"/>
       <input type="button" value="减法" style="width:110px;height: 50px;" id="jianfa" /><br />
       <input type="button" value="乘法" style="width:110px;height: 50px;" id="chengfa" />
       <input type="button" value="除法" style="width:110px;height: 50px;"id="chufa" /><br />
       <input type="button" value="π" style="width:110px;height: 50px;"id="pi" />
       <input type="button" value="正方形周长" style="width:110px;height: 50px;"id="zfxzc" /><br />
       <input type="button" value="正方形面积" style="width:110px;height: 50px;"id="zfxmj" />
       <input type="button" value="长方形周长" style="width:110px;height: 50px;"id="cfxzc" /><br />
      <input type="button" value="长方形面积" style="width:110px;height: 50px;"id="cfxmj" />
       <input type="button" value="三角形周长" style="width:110px;height: 50px;"id="sjxzc"/><br />
       <input type="button" value="三角形面积" style="width:110px;height: 50px;"id="sjxmj"/>
       <input type="button" value="梯形面积" style="width:110px;height: 50px;"id="txmj"/><br />
       <input type="button" value="圆周长" style="width:110px;height: 50px;"id="yzc"/>
       <input type="button" value="圆面积" style="width:110px;height: 50px"id="ymj"/><br />
       <input type="button" value="立方体表面积" style="width:110px;height: 50px;"id="lftbmj"/>
       <input type="button" value="立方体体积" style="width:110px;height: 50px;"id="lfttj"/><br />
       <input type="button" value="立方体体积" style="width:110px;height: 50px;"id="lfttj"/>
      <input type="button" value="长方体表面积" style="width:110px;height: 50px;"id="cftbmj"/><br />
       <input type="button"value="长方体体积" style="width:110px;height: 50px;"id="cfttj"/>
       <input type="button" value="圆柱表面积" style="width:110px;height: 50px;"id="yzbmj"/><br />
       <input type="button" value="圆柱体积" style="width:110px;height: 50px;"id="yztj"/>
       <input type="button" value="圆锥体积" style="width:110px;height: 50px;"id="yztj2"/><br />
       <input type="button" value="圆球体积" style="width:110px;height: 50px;"id="yqtj"/>
       <input type="button" value="幂" style="width:110px;height: 50px;"id="mi"/><br />
       <input type="button" value="开平方根" style="width:110px;height: 50px;"id="kpfg"/>
    </div>
      <script>
        var jiafa = document.getElementById("jiafa");
        var jianfa = document.getElementById("jianfa");
        var chengfa = document.getElementById("chengfa");
        var chufa = document.getElementById ("chufa");
        var pi = document.getElementById ("pi");
        var zfxzc = document.getElementById ("zfxzc");
        var zfxmj = document.getElementById("zfxmj");
        var cfxzc = document.getElementById("cfxzc");
        var cfxmj = document.getElementById("cfxmj");
        var sjxzc = document.getElementById("sjxzc");
        var sjxmj = document.getElementById("sjxmj");
        var txmj = document.getElementById("txmj");
        var yzc = document.getElementById("yzc");
        var ymj = document.getElementById("ymj");
        var lftbmj = document.getElementById("lftbmj");
        var lfttj = document.getElementById("lfttj");
        var cftbmj = document.getElementById ("cftbmj");
        var cfttj = document.getElementById("cfttj");
        var yzbmj = document.getElementById("yzbmj");
        var yztj = document.getElementById ("yztj");
        var yztj2 = document.getElementById ("yztj2");
        var yqtj = document.getElementById("yqtj");
        var mi = document.getElementById("mi");
        var kpfg = document.getElementById("kpfg");
        var num1 = document.getElementById("num1");
        var num2 = document.getElementById("num2");
        var num3 = document.getElementById ("num3");
        var num4 = document.getElementById("num4");
        jiafa.onclick = function(){
            num4.value=parseFloat(num1.value)+ parseFloat(num2.value);
        }
        jianfa.onclick = function(){
            num4.value=parseFloat(num1.value)-parseFloat(num2.value);
        }
        chengfa.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num2.value);
        }
        chufa.onclick = function(){
            num4.value=parseFloat(num1.value)/parseFloat(num2.value);
        }
        pi.onclick = function(){
            num4.value=parseFloat(num1.value)*3.14;
        }
        zfxzc.onclick = function(){
            num4.value=parseFloat(num1.value)*4;
        }
        zfxmj.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num1.value);
        }
        cfxzc.onclick = function(){
            num4.value=parseFloat(num1.value)*2+parseFloat(num2.value)*2;
        }
        cfxmj.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num2.value);
        }
        sjxzc.onclick = function(){
            num4.value=parseFloat(num1.value)+parseFloat(num2.value)+parseFloat(num3.value);
        }
        sjxmj.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num2.value)/2;
        }
        txmj.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num3.value)+parseFloat(num2.value)*parseFloat(num3.value)/2;
        }
        yzc.onclick = function(){
            num4.value=parseFloat(num1.value)*2*3.14;
        }
        ymj.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num1.value)*3.14;
        }
        lftbmj.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num1.value)*6;
        }
        lfttj.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num2.value)*parseFloat(num3.value);
        }
        cftbmj.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num2.value)+parseFloat(num1.value)*parseFloat(num3.value)+parseFloat(num2.value)*parseFloat(num3.value);
        }
        cfttj.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num2.value)*parseFloat(num3.value);
        }
        yzbmj.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num1.value)*3.14*2+2*3.14*parseFloat(num1.value)*parseFloat(num2.value);
        }
        yztj.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num1.value)*parseFloat(num2.value)*3.14;
        }
        yztj2.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num1.value)*3.14*parseFloat(num2.value)/3;
        }
        yqtj.onclick = function(){
            num4.value=parseFloat(num1.value)*parseFloat(num1.value)*parseFloat(num1.value)*0.75*3.14;
        }
        mi.onclick = function(){
            num4.value=Math.pow(parseFloat(num1.value),parseFloat(num2.value));
        }
        kpfg.onclick= function(){
            num4.value=Math.sqrt(parseFloat(num1.value));
        }
      </script>
	  
</body>
</html>